<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-button type="primary" @click="dialogVisible = true"
        >添加分类</el-button
      >
      <!-- 表格 -->
      <el-table
        :data="classList"
        style="width: 100%; margin-bottom: 20px"
        row-key="cat_id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="sort" type="" label="#" width="50">
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称">
        </el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="scope.row.cat_deleted == false"
              effect="dark"
              size="mini"
              ><i class="el-icon-success"></i
            ></el-tag>
            <el-tag
              type="danger"
              v-if="scope.row.cat_deleted == true"
              effect="dark"
              size="mini"
              ><i class="el-icon-error"></i
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
            <el-tag v-if="scope.row.cat_level == 1" type="success">二级</el-tag>
            <el-tag v-if="scope.row.cat_level == 2" type="info">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editClass(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delclass(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加弹框 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%">
        <el-form
          :rules="rules"
          ref="form"
          :model="form"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="form.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="分类层级" prop="cat_level">
            <el-select v-model="form.cat_level" placeholder="请选择分类层级">
              <el-option label="一级" value="0"></el-option>
              <el-option label="二级" value="1"></el-option>
              <el-option label="三级" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addClass">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑弹框 -->
      <el-dialog
  title="编辑"
  :visible.sync="dialogVisible2"
  width="50%">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="ruleForm.cat_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="Edclass">确 定</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getClass, AddClass,EditClass ,delClass} from "@/utils/api";
export default {
  name: "APP",
  data() {
    return {
      classList: [], //商品分类数据
      pagenum: 1, //当前页码
      pagesize: 5, //每页显示多少条
      total: 0, //总条数
      dialogVisible: false, //添加弹窗默认状态
      dialogVisible2:false, //编辑弹窗默认状态
      id:'', //编辑id
      form: {
        cat_name: "", //分类名称
        cat_level: "", //分类层级
        cat_pid: "", //分类父iD
      },
      ruleForm:{
        cat_name:'',//分类名称
      },

      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
        cat_level: [
          { required: true, message: "请选择分类层级", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.Class();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.Class();
    },

    //封装请求
    Class() {
      let params = {
        type: [1, 2, 3],
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      };
      getClass(params).then((res) => {
        res.data.result.forEach((item, index) => {
          item.sort = index + 1;
        });
        this.total = res.data.total;
        this.classList = res.data.result;
      });
    },

    //添加分类
    addClass() {
      this.form.cat_pid = this.form.cat_level;
      AddClass(this.form).then((res) => {
        // console.log(res);
        // 关闭弹框
        this.dialogVisible = false;
        if (res.meta.status == 201) {
          this.Class()
          this.$message({
            message: "添加分类成功",
            type: "success",
          });
        }else{
          this.$message.error('添加分类失败');
        }
      });
    },

    // 分类按钮事件
    editClass(val){
      console.log(val);
      this.dialogVisible2 = true
      this.id = val.cat_id
      this.ruleForm = val
    },

    //确定编辑按钮事件
    Edclass(){
      let params = {
        id:this.id,
        cat_name:this.ruleForm.cat_name,
      }
      EditClass(params).then((res)=>{
        // console.log(res);
        this.dialogVisible2 = false;
        if (res.meta.status == 200) {
          this.Class()
          this.$message({
            message: "更新成功",
            type: "success",
          });
        }else{
          this.$message.error('更新失败');
        }
      })
    },

    //删除分类
    delclass(val){
      console.log(val.cat_id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delClass(val.cat_id).then((res)=>{
            if(res.meta.status == 200){
              this.Class()
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            }else{
              this.$message.error('删除失败！');
            }
          })  
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  created() {
    this.Class();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-icon-success {
  font-size: 20px;
}
.el-icon-error {
  font-size: 20px;
}
</style>
